<template>
  <div class="dashboard-editor-container">
    <github-corner class="github-corner" />

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :char-axis-x="chartAxisX" :chart-data="lineChartData" />
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <InsectsInfoTable @getSelectedInsectsInfo="setHeatmapDatasource" />
    </el-row>
    <el-row :gutter="32">
      <el-col :span="14">
        <div class="chart-wrapper">
          <Heatmap v-if="!show_progress" ref="heatmap" :img_src="heatmap_bg" :data_source="latest_insects_info" />
        </div>
      </el-col>
      <el-col :span="10">
        <div class="chart-wrapper">
          <span>虫群规模统计</span>
          <raddar-chart />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :span="14" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :span="10">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
      <!--        <todo-list />-->
      <!--      </el-col>-->
      <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
      <!--        <box-card />-->
      <!--      </el-col>-->
    </el-row>
    <!--    <el-row :gutter="32">-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <pie-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <bar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import { query_recent_insects_info } from '@/api/remote-search'
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import InsectsInfoTable from '@/views/control-panel/components/insects-info-table'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'
import Heatmap from '@/views/dashboard/admin/components/Heatmap'
const insectMap = {
  insect0: 0,
  insect1: 1
}
const lineChartData = {
  insect0: {
    expectedData: [5873, 0, 934, 508, 17150, 35462, 23227],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  },
  insect1: {
    expectedData: [4650, 0, 10479, 33663, 28208, 7538, 10740],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  },
  all_insects_total: {
    expectedData: [10523, 0, 11413, 34171, 45358, 43000, 33967],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  },
  shoppings: {
    expectedData: [0, 0, 0, 0, 0, 0, 0],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    InsectsInfoTable,
    Heatmap,
    GithubCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    // BarChart,
    TransactionTable
    // TodoList,
    // BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.insect0,
      recent_insects_info: {
        each_board_info: {
          board: '1-1-1',
          飞虱: 0,
          蓟马: 0
        }
      },
      chartAxisX: 12,
      heatmap_bg: require('@/assets/images/farm.jpg'),
      latest_insects_info: {
        each_board_info: {
          board: '1-1-1',
          飞虱: 0,
          蓟马: 0
        }
      }
    }
  },
  // created() {
  //   this.getRecentInsectsInfo()
  // },
  mounted() {
    this.getRecentInsectsInfo()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
      this.setLineChartDataSource(type)
      this.$refs.heatmap.repaint_heatmap()
    },
    getRecentInsectsInfo() {
      query_recent_insects_info().then(res => {
        this.recent_insects_info = res.data
        // console.log(res.data)
      })
    },
    setLineChartDataSource(type) {
      const insects_total_info = []
      const data_length = this.recent_insects_info.length
      const all_insects_total = []
      const insect_total_info = []
      const insect_race = insectMap[type]
      switch (type) {
        case 'all_insects_total':
          if (this.chartAxisX > data_length) {
            this.chartAxisX = data_length
            for (let i = 0; i < data_length; i++) {
              all_insects_total.push(this.recent_insects_info[i].insects_total)
            }
            // console.log(all_insects_total)
          } else {
            for (let i = 0; i < this.chartAxisX; i++) {
              all_insects_total.push(this.recent_insects_info[i].insects_total)
            }
          }
          this.lineChartData.actualData = all_insects_total
          break
        default:
          // console.log(this.recent_insects_info)
          if (this.chartAxisX > data_length) {
            this.chartAxisX = data_length
            for (let i = 0; i < data_length; i++) {
              insects_total_info.push(this.recent_insects_info[i].insects_total_each)
            }
          } else {
            for (let i = 0; i < this.chartAxisX; i++) {
              insects_total_info.push(this.recent_insects_info[i].insects_total_each)
            }
          }
          // console.log(insects_total_info)
          // console.log(all_insects_total)

          for (let i = 0; i < data_length; i++) {
            insect_total_info.push(insects_total_info[i][insect_race].insects_total)
          }
          this.lineChartData.actualData = insect_total_info
          // this.lineChartData.expectedData = insect_total_info.slice(-6)
      }
    },
    setHeatmapDatasource(data_source) {
      this.latest_insects_info = data_source
      // console.log(this.latest_insects_info)
      this.$refs.heatmap.repaint_heatmap(this.latest_insects_info)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
